<!DOCTYPE HTML>
<html style="height:100%">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>mine</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/font-awesome.css" />
    <style>
        label {
            margin: 0.5rem;
            font-size: 1.2rem;
        }
        ul {
            margin-bottom: 0.5rem;
        }
        ul li {
            margin: 0.25rem 0.5rem;
            padding: 0.25rem;
            color: #000;
            word-wrap: break-word;
        }
    </style>
</head>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue1.0.js"></script>
<script type="text/javascript" src="../script/util.js"></script>
<script type="text/javascript">
</script>
<style>
    [v-cloak] {
        display: none;
    }
    .left {
        width: 45%;
        float: left;
        box-sizing: border-box;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .right {
        width: 55%;
        float: right;
        box-sizing: border-box;
        padding-left: 1.0rem;
        padding-right: 1.0rem;
    }
    .two_left {
        width: 50%;
        float: left;
    }
    .two_right {
        width: 50%;
        float: right;
    }
</style>

<body>
    <div class="aui-bar  aui-bar-light" v-cloak>
        <div class="left" @click="changetoperson()">
            <img style="margin-top:0.4rem;width: 100%;" src="../image/avatar.jpeg">
            <p style="font-size: small;text-align: center;color:#C62F2F;margin-top:0.5rem;margin-bottom:0.5rem">查看个人信息</p>
        </div>
        <div class="right">
            <div style="font-size: xx-large;margin-bottom:0.7rem;text-align:right;margin-top:0.7rem;color:#000000;font-size:1rem">{{user.name}}</div>
            <div style="margin-bottom:0.6rem;text-align:right;color:#000000;font-size:0.75rem">{{user.depName}}</div>
            <div style="padding-top:0.5rem;">
                <div style="width:50%;float:left;text-align:right;color:#000000;font-size:0.75rem">
                    <div>{{LianXiXueSheng}}/{{LianXiXueShengM}}</div>
                    <div>联系学生</div>
                </div>
                <div style="width:50%;float:right;text-align:right;color:#000000;font-size:0.75rem">
                    <div>{{LianxiJiaZhang}}/{{LianxiJiaZhangM}}</div>
                    <div>联系家长</div>
                </div>
            </div>
        </div>
    </div>
    <div class="aui-bar  aui-bar-light" style="color:#000000;font-size:0.65rem;" v-cloak>
        <div class="two_left" style="padding:0.15rem 0.2rem 0rem 0.2rem">
            <div class="two_left" style="padding:0.15rem 0.2rem 0rem 0.2rem">
                <div>{{jinsushe}}/{{jinsusheM}}</div>
                <div>进宿舍</div>
            </div>
            <div class="two_right" style="padding:0.15rem 0.2rem 0rem 0.2rem">
                <div>{{jinshitang}}/{{jinshitangM}}</div>
                <div>进食堂</div>
            </div>
        </div>
        <div class="two_right" style="padding:0.15rem 0.2rem 0rem 0.2rem">
            <div class="two_left" style="padding:0.15rem 0.2rem 0rem 0.2rem">
                <div>{{jinbanji}}/{{jinbanjiM}}</div>
                <div>进班级</div>
            </div>
            <div class="two_right" style="padding:0.15rem 0.2rem 0rem 0.2rem">
                <div>{{qita}}/{{qitaM}}</div>
                <div>其他</div>
            </div>
        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-bar-light" style="background-color:#ffffff;padding-left:0.5rem">
        <div>
            <i class="fa fa-birthday-cake" aria-hidden="true" style="color:#F3CA2E;font-size:0.95rem;margin-left:0.7rem">
            </i>
            <span class="aui-margin-l-15" style="color:#000000">生日提醒 &nbsp;&nbsp;{{birthstu}} </span>

        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="changetoall() ">
        <div>
            <i class="fa fa-bar-chart" aria-hidden="true" style="color:#C62F2F;font-size:1.1rem;margin-left:0.5rem"></i>
            <span class="aui-margin-l-15" style="color:#000000">获取统计信息</span>
        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="changetoMyprase()">
        <div>
            <i class="fa fa-thumbs-o-up" aria-hidden="true" style="color:#C62F2F;font-size:1.1rem;margin-left:0.7rem"></i>
            <span class="aui-margin-l-15" style="color:#000000">我的赞</span>
        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="changetoMycomment()">
        <div>
            <i class="fa fa-comment-o" aria-hidden="true" style="color:#C62F2F;font-size:1.05rem;margin-left:0.7rem"></i>
            <span class="aui-margin-l-15" style="color:#000000">我的评论</span>
        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="changetoMystorage()">
        <div>
            <i class="fa fa-star-o" aria-hidden="true" style="color:#C62F2F;font-size:1.1rem;margin-left:0.7rem"></i>
            <span class="aui-margin-l-15" style="color:#000000">我的收藏</span>
        </div>
    </div>
    <div class="aui-info  aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="codechange()">
        <div>
            <i class="fa fa-cog" aria-hidden="true" style="color:#FFA200;font-size:1.1rem;margin-left:0.7rem"></i>
            <span class="aui-margin-l-15" style="color:#000000">修改密码</span>
        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="chtokefu()">
        <div>
            <img src="../icon/kefupink.png" style="width:1.2rem;height:1.2rem;margin-left:0.5rem" alt="">
            <span class="aui-margin-l-15" style="color:#000000;font-size: 0.7rem;height: 1.2rem;line-height: 1.2rem">联系我们</span>
        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="clearStorge()">
        <div>
            <i class="fa fa-trash" aria-hidden="true" style="color:#05C4F4;font-size:1.1rem;margin-left:0.7rem"></i>
            <span class="aui-margin-l-15" style="color:#000000">清除缓存</span>
        </div>
    </div>
    <div class="aui-info aui-bar aui-padded-l-10 aui-padded-r-10 aui-bar-light" style="background-color:white" @click="exitLogin()">
        <div>
            <i class="fa fa-sign-out" aria-hidden="true" style="color:#B0B0B0;font-size:1rem;margin-left:0.7rem"></i>
            <span class="aui-margin-l-15" style="color:#000000">退出登录</span>
        </div>
    </div>
</body>


<script type="text/javascript">
    var deviceH;
    var deviceW;
    apiready = function () {
        clientId = "";
        var h = api.pageParam["h"];
        deviceH = api.winHeight;
        deviceW = api.winWidth;
        vm = new Vue(vueConfig);
    };

    function initMeiQia() {
        //创建美洽
        mq = api.require('meiQia');
        //配置初始化美洽需要的appkey
        var param = {
            appkey: "38bc9c2a30600f5905f7567bcf9a771a" // 这里需要填写自己在美洽申请的appkey
        };
        //初始化美洽
        mq.initMeiQia(param, function (ret, err) {
            if (ret) {
                //初始化成功
                console.log(ret); //找到用户clientId
                clientId = ret.clientId;
                console.log(clientId);
                setNavRightButton();
                setScheduledAgentOrAgentGroup();
                setLoginMQClientId();
            } else {
                alert(JSON.stringify(err));
            }
        })
    };

    function meiQia_show() {
        mq.show();
    }

    function setTitleColor() {
        var mq = api.require('meiQia');
        //设置title以及按钮颜色
        var titleColor = {
            color: "#0000ff"
        };
        mq.setTitleColor(titleColor);
    }

    function setNavRightButton() {
        var buttonInfo = {
            title: "私人助理哟",
            image: "http://www.apicloud.com/image/jpeg/54/1f/541f675422b1d4469711b78680d81c6a.30x30.jpg"
        };
        mq = api.require('meiQia');
        mq.setNavRightButton(buttonInfo, buttonTapCallback);

        function buttonTapCallback() {
            api.closeWin();
        }
    }

    function getUnreadMessageCount() {
        mq = api.require('meiQia');
        mq.getUnreadMessageCount(unreadMessageCountCallback);

        function unreadMessageCountCallback(result) {
            alert("总共有" + result["count"] + "条未读消息");
        }
    }

    function setPreSendTextMessage() {
        var message = {
            message: "This is the presend message, you can put your product here to indicate to agent that the client is browsing it",
        };
        mq = api.require('meiQia');
        mq.setPreSendTextMessage(message);
    }
    //指定客服和客服组
    function setScheduledAgentOrAgentGroup() {
        var mq = api.require('meiQia');
        //设置指定分配给某客服,并且如果客服不在线，则留言而不转接给其他客服
        var scheduleParam = {
            agentId: "9012106ea69e7687eab79ccbdca35bea", //9012106ea69e7687eab79ccbdca35bea
            scheduleRule: "enterprise"
        };
        mq.setScheduledAgentOrAgentGroup(scheduleParam);
    }

    //设置美恰id
    function setLoginMQClientId() {
        var mq = api.require('meiQia');
        console.log("clientId", clientId);
        //设置美洽ID
        var clientIdParam = {
            id: clientId,
        };
        mq.setLoginMQClientId(clientIdParam);
        // meiQia_show();
    }


    vueConfig = {
        el: "body",
        data: {
            clientId: "",
            student: {},
            teacher: {},
            teachers: [],
            user: {},
            jinsushe: '',
            jinshitang: '',
            jinbanji: '',
            qita: '',
            jinsusheM: '',
            jinshitangM: '',
            jinbanjiM: '',
            LianxiJiaZhang: "",
            LianXiXueSheng: "",
            LianxiJiaZhangM: "",
            LianXiXueShengM: "",
            qitaM: '',
            l_stu: 0,
            l_fam: 0,
            birthstu: '最近暂无即将过生日的人',
        },
        //右上角用户名
        created: function () {
            var me = this;
            initMeiQia();
            var result = api.getPrefs({
                key: 'user',
                sync: true
            });

            me.user = JSON.parse(result);
            //统计信息
            $api.get(serverIp + '/friend/calActivity.do', function (ret) {
                if (ret) {
                    me.jinsushe = ret.jinsushe;
                    me.jinshitang = ret.jinshitang;
                    me.jinbanji = ret.jinbanji;
                    me.qita = ret.qita;
                    me.jinsusheM = ret.jinsusheM;
                    me.jinshitangM = ret.jinshitangM;
                    me.jinbanjiM = ret.jinbanjiM;
                    me.qitaM = ret.qitaM;
                    me.LianxiJiaZhang = ret.LianxiJiaZhang;
                    me.LianXiXueSheng = ret.LianXiXueSheng;
                    me.LianxiJiaZhangM = ret.LianxiJiaZhangM;
                    me.LianXiXueShengM = ret.LianXiXueShengM;

                }
            }, 'json');
            //生日提醒
            $api.get(serverIp + '/friend/listMyFriendBirthStudent.do', function (ret) {
                if (ret) {
                    if (ret.result.length > 0) {
                        me.birthstu = ret.result[0].name;
                    } else {}
                }
            }, 'json');
        },
        methods: {
            chtokefu: function () {
                meiQia_show();
            },
            codechange: function () {
                api.openWin({
                    name: 'changepassword',
                    url: './mine/changepassword.html',
                    pageParam: {
                        name: 'test'
                    }
                });
            },
            changetoactivity: function () {
                api.openFrame({
                    name: 'Activities',
                    url: './Activities.html',
                    rect: {
                        x: 0,
                        y: h,
                        w: deviceW,
                        h: deviceH - 50 - h
                    },
                    pageParam: {
                        name: 'test'
                    },
                    bounces: true,
                    bgColor: 'rgba(0,0,0,0)',
                    vScrollBarEnabled: true,
                    hScrollBarEnabled: true,
                });
                api.execScript({
                    name: 'main',
                    script: "SetIndex()"
                });
                api.closeFrame({
                    name: 'mine'
                });
            },
            changetoMyprase: function () {
                api.openWin({
                    name: 'Myprase',
                    url: './mine/Myprase.html',
                    pageParam: {
                        name: 'test'
                    }
                });
            },
            changetoMycomment: function () {
                api.openWin({
                    name: 'Mycomment',
                    url: './mine/Mycomment.html',
                    pageParam: {
                        name: 'test'
                    }
                });

            },
            changetoMystorage: function () {
                api.openWin({
                    name: 'Mystorage',
                    url: './mine/Mystorage.html',
                    pageParam: {
                        name: 'test'
                    }
                });
            },
            clearStorge: function () {
                var me = this;
                api.confirm({
                    title: '清楚缓存',
                    msg: '您确定要清空本地的缓存数据吗？',
                    buttons: ['确定', '取消']
                }, function (ret, err) {
                    if (ret.buttonIndex == 1) {
                        api.clearCache(function () {
                            api.toast({
                                msg: '清除完成'
                            });
                        });
                    }
                });

            },
            changetoperson: function () {
                api.openWin({
                    name: 'PersonalInformation',
                    url: './mine/PersonalInformation.html'
                });
            },
            exitLogin: function () {
                api.closeToWin({
                    name: 'root'
                });
            },
            changetoall: function () {
                api.openWin({
                    name: 'teacherdetails',
                    url: './mine/teacherdetails.html'
                });
            }
        }
    }
</script>

</html>